<template>
	<view :style="{ minHeight: windowHeight + 'px' }" class="container">
		<view class="auth-step-col">
			<view class="auth-step-col-label">姓名</view>
			<view class="auth-step-col-input"><input type="text" v-model="real_name" placeholder-class="placeholder" placeholder="身份证持有人姓名" /></view>
		</view>
		<view class="auth-step-col">
			<view class="auth-step-col-label">身份证号</view>
			<view class="auth-step-col-input"><input type="idcard" v-model="idcard" placeholder-class="placeholder" placeholder="请输入合法的中国公民身份证号码" /></view>
		</view>
		<view class="auth-step-col">
			<view class="auth-step-col-label">验证码</view>
			<view class="auth-step-col-input"><input type="number" v-model="verify" placeholder-class="placeholder" :placeholder="'已发送到' + telString" /></view>
			<view class="auth-step-col-captcha" @tap.stop="getSmsCode">{{ codeText }}</view>
		</view>
		<view class="auth-step-submit"><u-button type="success" :disabled="disable" @click="submit">提交</u-button></view>
		<view class="auth-action-tips">
			点击提交则表示了解并同意
			<text @tap.stop="toAgreePage" :data-index="0">实名认证协议</text>
		</view>
		<u-verification-code :keep-running="true" unique-key="certificationCode" end-text="重新发送" ref="codeSend" @change="changeCode"></u-verification-code>
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	data() {
		return {
			windowHeight: null,
			real_name: '',
			idcard: '',
			disable: false,
			verify: '',
			codeText: ''
		};
	},
	onShow() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowHeight = systemInfo.windowHeight;
		setTimeout(() => {
			this.getSmsCode();
		}, 1000);
	},
	computed: {
		telString() {
			return Tools.phoneNumberProtection(this.userInfo.mobile);
		}
	},
	methods: {
		toAgreePage() {
			this.navigateTo({
				url: this.$u.api.openAgreementPage('AUTHENTICATION')
			});
		},
		getSmsCode() {
			if (this.$refs.codeSend.canGetCode) {
				this.$u.api
					.sendSmsCode(this.userInfo.mobile, 'verify')
					.then(res => {
						this.$refs.codeSend.start();
						this.$u.toast('验证码已发送');
					})
					.catch(e => {
						this.$refs.codeSend.reset();
						this.navigateBack();
					});
			}
		},
		changeCode(text) {
			this.codeText = text;
		},
		submit() {
			if (this.$u.test.isEmpty(this.verify)) {
				this.$u.toast('请输入验证码');
				return false;
			}
			if (!this.$u.test.chinese(this.real_name)) {
				this.$u.toast('姓名不正确');
				return false;
			}
			if (!this.$u.test.idCard(String(this.idcard).toUpperCase())) {
				this.$u.toast('身份证号码不正确');
				return false;
			}
			this.disable = true;
			this.$u.api
				.submitRealNameCartication(String(this.idcard).toUpperCase(), this.real_name, this.verify)
				.then(res => {
					this.redirectTo({
						url: '/pageUser/certification/result?status=1'
					});
				})
				.catch(e => {
					this.disable = false;
					if (e.data.code != '201' && e.statusCode == 200) {
						this.navigateTo({
							url: '/pageUser/certification/result?status=0'
						});
					}
				});
		}
	}
};
</script>

<style lang="scss">
.container {
	padding: 30rpx 30rpx 0;
	background-color: #fff;
	box-sizing: border-box;
}
.auth-step-title {
	font-size: 24rpx;
	color: $uni-text-color-grey;
	margin-bottom: 30rpx;
}
.auth-step-col {
	height: 100rpx;
	padding: 10rpx 0;
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #333;
	.auth-step-col-label {
		width: 160rpx;
		flex-shrink: 0;
		color: #666;
	}
	.auth-step-col-captcha {
		width: 200rpx;
		height: 62rpx;
		flex-shrink: 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.auth-step-col-input {
		flex: 1;
		padding: 0 20rpx;
		.placeholder {
			font-size: 26rpx;
			color: $uni-text-color-placeholder;
		}
		input {
			font-size: 32rpx;
		}
	}
}

.auth-step-submit {
	margin-top: 60rpx;
}

.auth-action-tips {
	height: 29rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(151, 151, 151, 1);
	line-height: 24rpx;
	letter-spacing: 1rpx;
	margin-top: 70rpx;
	position: absolute;
	bottom: 30rpx;
	left: 0;
	width: 100%;
	text-align: center;
	text {
		padding: 0 6rpx;
		color: rgba(255, 77, 126, 1);
	}
}
</style>
